<template>
    <div ref="refLibSearchTextList">
        <result-filter-component :filter="resultView.filter" @set:filter="$emit('set:filter',$event)" />
        <div id="search-index-main-list-box" :style="`height:${mainHeight}px;`">
            <div class="search-index-main-list-item-box" v-for="(item, index0) in resultView.page" :key="index0">
                <div class="search-index-main-list-item-title">
                    <h3 @click="$emit('open:meta', item.source.id)"
                        class="search-index-main-list-item-title-content search-index-main-list-item-title-content-hover">
                        <n-ellipsis :style="`max-width: ${titleTextWidth}px`">
                            <span v-html="item.title" />
                            <template #tooltip>
                                <div :style="`width: ${titleTextWidth}px;`">
                                    <span v-html="item.title" />
                                </div>
                            </template>
                        </n-ellipsis>
                    </h3>
                    <el-tag class="state-tag" :type="stateStyle[item.source.state]" size="small" effect="dark">
                        {{ stateText[item.source.state] }}
                    </el-tag>
                </div>
                <div class="search-index-main-list-item-info-box">
                    <div class="search-index-main-list-item-subtitle" v-html="item.subtitle" />
                    <div class="search-index-main-list-item-tag-group">
                        <template v-for="(tag, index1) in item.tagArray" :key="index1">
                            <span class="search-index-main-list-item-tag search-index-main-list-item-tag-hover"
                                v-html="tag.text" />
                        </template>
                    </div>
                    <div class="search-index-main-list-item-tag-group">
                        <template v-for="(tag, index1) in item.authorArray" :key="index1">
                            <span class="search-index-main-list-item-tag search-index-main-list-item-tag-hover"
                                v-html="tag.text" />
                        </template>
                    </div>
                    <div class="search-index-main-list-item-summary">
                        <n-ellipsis :line-clamp="2" expand-trigger="click" :tooltip="false">
                            <span class="search-index-main-list-item-summary-content" v-html="item.description" />
                        </n-ellipsis>
                    </div>
                </div>
                <div>
                    <span class="search-index-main-list-item-meta-tag">
                        {{ "索引类型" }}
                        <span class="search-index-main-list-item-meta-tag-symbol">:</span>&nbsp;
                        <span class="search-index-main-list-item-meta-tag-val">{{ indexType[item.source.type] }}</span>
                    </span>
                    <span class="search-index-main-list-item-meta-tag">
                        {{ "发布时间" }}
                        <span class="search-index-main-list-item-meta-tag-symbol">:</span>&nbsp;
                        <span class="search-index-main-list-item-meta-tag-val">{{ new Date(item.source.releaseDate).toLocaleString() }}</span>
                    </span>
                    <span class="search-index-main-list-item-meta-tag">
                        {{ "点击次数:" }}
                        <span class="search-index-main-list-item-meta-tag-symbol">:</span>&nbsp;
                        <span class="search-index-main-list-item-meta-tag-val">{{ item.source.clickTimes }}</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ListView,indexType } from '@/views/index.js'
import ResultFilterComponent from '@/components/ResultFilterComponent/ResultFilterComponent.vue'
export default {
    props: {
        resultView: {
            type: ListView,
            default: ListView.defaultView
        },
    },
    components:{
        ResultFilterComponent
    },
    methods: {},
    beforeUnmount() {/**/ },
    beforeUpdate() {/* */ },
    beforeCreate() {/**/ },
    beforeMount() {
        this.$nextTick(() => {
            const refLibSearchTextListMainBox = this.$refs.refLibSearchTextList.children[1]
            const refSearchHeader = this.$refs.refLibSearchTextList.parentElement.parentElement.parentElement.children[0]
            const refSearchTab = this.$refs.refLibSearchTextList.parentElement.children[0]
            const filter = this.$refs.refLibSearchTextList.firstElementChild
            this.mainHeight = document.body.clientHeight
                - refSearchHeader.clientHeight
                - refSearchTab.clientHeight
                - filter.clientHeight
                - 24
            this.titleTextWidth = refLibSearchTextListMainBox.clientWidth - 42
            window.addEventListener('resize', () => {
                this.mainHeight = document.body.clientHeight
                    - refSearchHeader.clientHeight
                    - refSearchTab.clientHeight
                    - filter.clientHeight
                    - 24
                this.titleTextWidth = refLibSearchTextListMainBox.clientWidth - 42
            })
        })
    },
    computed: {},
    data() {
        return {
            stateText: new Array('已删除','正常','临时','待审核'),
            stateStyle: new Array('danger','success','warning','info'),
            stateColor: new Array('#C586C0','#0DBC79','#CCA700','#D18616'),
            mainHeight: 0,
            titleTextWidth: 0,
        }
    }
}
</script>

<style>
.el-empty {
    /* --el-empty-padding: 0 !important; */
    height: 100%;
    --el-empty-image-width: auto !important;
}

#search-index-main-list-box {
    display: flex;
    flex-direction: column;
    padding-left: 28px;
    padding-right: 14px;
    overflow-y: scroll;
    background-color: #1E1E1E;
}

.search-index-main-list-item-box {
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: left;
    border-bottom: 2px dashed var(--el-border-color);
}

.search-index-main-list-item-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-index-main-list-item-info-box {
    display: flex;
    flex-direction: column;
}

.search-index-main-list-item-subtitle {
    line-height: 1.4 !important;
    /* font-weight: bold; */
    font-size: 11px;
    word-wrap: break-word;
    margin: 0;
}

.search-index-main-list-item-tag {
    font-size: 12px;
    font-weight: bolder;
    margin-right: 6px;
}

.search-index-main-list-item-tag-hover :hover {
    text-decoration: underline;
}

.search-index-main-list-item-summary {
    color: #222 !important;
    line-height: 1.4 !important;
    /* word-wrap: break-word;
    margin: 0; */
}

.search-index-main-list-item-summary-content {
    font-size: 13px;
    line-height: 16px;
}

.search-index-main-list-item-title-content {
    margin: 0;
}

.search-index-main-list-item-title-content-hover :hover {
    text-decoration: underline;
    cursor: pointer;
}

.search-index-main-list-item-meta-tag {
    margin-right: 15px;
    font-size: 11px;
    font-weight: bolder;
    color: #4EC9B0;
    line-height: 16px;
}

.search-index-main-list-item-meta-tag-symbol {
    font-size: 11px;
    color: #9CDCFE;
    font-weight: bolder;
}

.search-index-main-list-item-meta-tag-val {
    color: #B5CEA8;
    font-size: 10px;
    font-weight: normal;
}

.state-tag {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 4.06px !important;
    padding-left: 4.06px !important;
    --el-tag-font-size: 9.76px !important;
    --el-tag-text-color: #FFFFFF;
}

.el-tag {
    border-radius: 0px;
}

.text-list-pagination {
    padding-top: 5px;
    position: relative;
    box-shadow: 0 -2px 6px -4px black;
}





</style>